<template>
  <scroll class="content-wrapper">
    <div class="content">
      <div class="rating-wrapper">
        <div class="rating">
          <div class="left block-container">
            <div class="left-wrapper block">
              <h1>{{seller.score}}</h1>
              <p class="title">综合评分</p>
              <p class="rank">高于周边商家{{seller.rating}}</p>
            </div>
          </div>
          <div class="right block-container">
            <div class="right-wrapper block">
              <div class="item">
                <span class="title">服务态度</span>
                <v-rating class="rating-stars" :score="seller.serviceScore" :fontSize="18" :lineHeight="18" :marginRight = "3" :show="true"></v-rating>
                <span class="score">{{seller.serviceScore}}分</span>
              </div>
              <div class="item">
                <span class="title">商品评分</span>
                <v-rating class="rating-stars" :score="seller.foodScore" :size="18" :marginRight = "3" :show="true"></v-rating>
                <span class="score">{{seller.serviceScore}}分</span>
              </div>
              <div class="item">
                <span class="title">送达时间</span>
                <span class="time">{{seller.deliveryTime}}分钟</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <splitter></splitter>
      <div class="comments-region">
        <div class="buttons">
          <span class="button positive" :class="{active: rateType === 2}" @click="setRatingType(2)">全部24</span>
          <span class="button positive" :class="{active: rateType === 1}" @click="setRatingType(1)">满意18</span>
          <span class="button negative" :class="{active: rateType === 0}" @click="setRatingType(0)">吐槽6</span>
        </div>
        <div class="switch" :class="{on: contentOnly}" @click="setContentOnly">
          <i class="iconfont icon-gou"></i>
          <span class="text">只看有内容的评价</span>
        </div>
        <ul class="comments">
          <li class="comment" v-for="rating in currentRatings">
            <div class="photo">
              <img :src="rating.avatar">
            </div>
            <div class="info">
              <div class="title">
                <h1 class="username">{{rating.username}}</h1>
                <!--使用过滤器实现-->
                <span class="datetime">{{rating.rateTime | millsec2Date | formatDate('yyyy-MM-dd hh:mm') }}</span>
              </div>
              <div class="ratingScore">
                <v-rating class="rating" :score="rating.score" :size="12" :marginRight="2"></v-rating>
                <span class="score">{{rating.score}}</span>
              </div>
              <p class="text">{{rating.text}}</p>
              <div class="recommend" v-if="rating.recommend.length > 0">
                <i class="iconfont icon-damuzhi"></i>
                <span class="name" v-for="name in rating.recommend">{{name}}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </scroll>
</template>

<script>
    import {mapState, mapGetters,mapMutations, mapActions} from 'vuex'
    import scroll from './scroll.vue'
    import rating from './rating'
    import splitter from './splitter.vue'
    export default {
        components:{
          'scroll': scroll,
          "v-rating": rating,
          'splitter': splitter
        },
        data:function () {
            return {
              rateType: 2, //0-吐槽 1-满意 2-全部
              contentOnly: false
            }
        },
        computed: {
          ...mapGetters(['seller', 'getRatings']),
          currentRatings: function () {
            return this.getRatings(this.rateType, this.contentOnly)
          }
        },

        methods: {
          setRatingType(rateType){
            this.rateType = rateType
          },
          setContentOnly(){
            this.contentOnly = !this.contentOnly
          }
        },
        filters: {
           millsec2Date: function(millsec) {
             let d = new Date()
             d.setTime(millsec)
             return d
          }
        }
    }
</script>

<style lang="scss" scoped>
  .content-wrapper{
    overflow: hidden;
    width: 100%;
    height: 100%;

    .content{
      height: 900px;
      .rating-wrapper{
        padding: 18px;

        .rating{
          display: flex;

          .left{
            flex-basis: 170px;
            border-right: 1px solid rgba(7,17,27,0.1);

            .left-wrapper{
              h1{
                margin-bottom: 12px;
                line-height: 28px;
                font-size: 24px;
                color: #f90;
              }
              .title{
                margin-bottom: 8px;
                line-height: 12px;
                font-size: 12px;
                color: #07111b;
              }
              .rank{
                line-height: 10px;
                font-size: 12px;
                color: #93999f;
              }
            }
          }
          .right{
            flex: 1;

            .right-wrapper{
              font-size: 12px;
              line-height: 18px;
              text-align: left;

              .item{
                margin-top: 8px;

                .title{
                  display: inline-block;
                  margin-right: 10px;
                  width: 70px;
                }
                .rating-stars{
                  display: inline-block;
                  vertical-align: bottom;
                }
                .score, .time{
                  display: inline-block;
                }
              }
            }
          }
        }
      }
      .comments-region{
        .buttons{
          padding: 18px;

          .positive {
            background: rgba(0,160,220,0.2);
          }
          .negative {
            background: rgba(77,85,93,0.2);
          }
          .active{
            color: #fff;
          }
          .positive.active {
            background: #00a0dc;
          }
          .negative.active {
            background: #4d555d;
          }

          .button{
            display: inline-block;
            font-size: 12px;
            line-height: 1.5;
            padding: 8px 12px;
            margin-right: 8px;
          }
        }
        .switch{
          border: 1px solid rgba(1,17,27,0.1);
          padding: 12px 18px;
          color: #93999f;

          .icon-gou{
            vertical-align: top;
            font-size: 24px;
            line-height: 24px;
            margin-right: 4px;
          }
          .text{
            vertical-align: top;
            display: inline-block;
            font-size: 12px;
            line-height: 24px;
          }
          &.on{
            .icon-gou {
              color: #00c850;
            }
          }
        }

        .comments{
          padding: 0 18px;

          .comment {
            display: flex;
            padding: 18px 0;
            border-bottom: 1px solid rgba(1,17,27,0.1);

            .photo {
              flex-basis: 28px;
              margin-right: 10px;

              img {
                width: 100%;
                height: auto;
              }
            }
            .info {
              flex: 1;

              .title {
                position: relative;

                .username {
                  line-height: 12px;
                  font-size: 10px;
                  font-weight: 700;
                  color: #07111b;
                  margin-bottom: 4px;
                }
                .datetime{
                  line-height: 12px;
                  font-size: 10px;
                  color: #93999f;

                  position: absolute;
                  top: 0;
                  right: 0;
                }
              }
              .ratingScore {
                margin-bottom: 6px;

                .rating {
                  vertical-align: top;
                }
                .score {
                  display: inline-block;
                  font-size: 10px;
                  line-height: 12px;
                  color: #93999f;
                  vertical-align: top;
                }
              }
              .text{
                line-height: 18px;
                color: #07111b;
                font-size: 12px;
                margin-bottom: 8px;
              }
              .recommend {

                .icon-damuzhi {
                  font-size: 9px;
                  line-height: 16px;
                  color: #00a0dc;

                  vertical-align: top;
                }
                .name{
                  font-size: 9px;
                  line-height: 16px;

                  display: inline-block;

                  margin-right: 8px;
                  border: 1px solid rgba(7,17,27,0.1);
                  border-radius: 1px;
                  color: #93999f;
                  padding: 0 6px;

                  vertical-align: top;
                }
              }
            }
          }
        }
      }
    }
  }
</style>
